<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<link rel="stylesheet" type="text/css" href="css/demo.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/material.js"></script>
	<script type="text/javascript" src="js/highcharts.js"></script>
</head>
<body>
	<h2>设备数据记录</h2>
	<p></p>
	<div style="margin:20px 0;"></div>
	
	<!--<table class="easyui-datagrid" title="设备管理" style="width:100%;height:800px"
			data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
			<tr>
				<th data-options="field:'itemid',width:80">ID</th>
				<th data-options="field:'productid',width:100,align:'center'">父级区域</th>
				<th data-options="field:'listprice',width:100,align:'center'">父级中继</th>
				<th data-options="field:'unitcost',width:180,align:'center'">设备供应商</th>
				<th data-options="field:'unitcost',width:180,align:'center'">设备类型</th>
				<th data-options="field:'unitcost',width:180,align:'center'">设备接入方式</th>
				<th data-options="field:'unitcost',width:180,align:'center'">名称</th>
				<th data-options="field:'unitcost',width:180,align:'center'">序列号</th>
				<th data-options="field:'unitcost',width:180,align:'center'">以太网IP</th>
				<th data-options="field:'unitcost',width:180,align:'center'">以太网端口</th>
				<th data-options="field:'unitcost',width:180,align:'center'">串口号</th>
				<th data-options="field:'unitcost',width:180,align:'center'">串口波特率</th>
				<th data-options="field:'unitcost',width:180,align:'center'">创建时间</th>
			</tr>
		</thead>
		
	</table>-->
	<table id="dg_records" style="width: 100%;"></table>
	
	<style>
		#ulGroup{ width: 100%; padding: 0px;}
		#ulGroup li{ float: left; list-style: none; margin: 5px 10px;}
		#ulGroup li a,#ulGroup li a.normal{ display: block; width: 80px; height: 40px; line-height: 40px; color: black; text-align: center; text-decoration: none;}
		#ulGroup li a:hover,#ulGroup li a.on{ color: white; font-weight: bold; background: #00BBEE;text-decoration: none;}
		#tbRecord{ width:100%; border-collapse: collapse; border:1px solid #0092DC;margin-top: 4px;}
		#tbRecord th{ border:1px solid gray; background: #efefef;}
		#tbRecord td{ padding: 5px;border:1px solid gray; text-align: center;}
		#back{ width: 80px; height: 40px; display:block; line-height: 40px; position: absolute; right: 20px; top: 30px;color: black; text-align: center; text-decoration: none;}
		#back:hover{color: white; font-weight: bold; background: #00BBEE;text-decoration: none;}
	</style>
	<div style="border-bottom: 1px solid gray; height: 50px;">
		<ul id="ulGroup"> 
			<li><a href="#" class="on">一组</a></li>
			<li><a href="#">二组</a></li>
			<li><a href="#">三组</a></li>
			<li><a href="#">四组</a></li>
		</ul>
	</div>
	<a href="javascript:void(0)" onclick="back()" id="back">返回>></a>
	<div id="container" style="min-width:400px;height:400px"></div>
</body>

<script type="text/javascript">
	var m = new Material();
	var p = window.location.href;
	if(p.indexOf("=")!=-1){
		p = p.split("=")[1];
		m.getDeviceRecords(p,function(data){
			var cats = [];
			var degresses = [];
			var title;
			for(var i=0;i<data.length;i++){
				title = data[i].name;
				cats.push(parseInt(data[i].created));
				degresses.push(data[i].degree);
			}
			var series = [];
			series.push({name:title,data:degresses});
				
			
			$('#container').highcharts({
		        chart: {
		            type: 'line'
		        },
		        title: {
		            text: title
		        },
		        subtitle: {
		            text: '数据来源:设备采集'
		        },
		        xAxis: {
		            categories: cats
		        },
		        yAxis: {
		            title: {
		                text: 'x'
		            }
		        },
		        plotOptions: {
		            line: {
		                dataLabels: {
		                    enabled: true          // 开启数据标签
		                },
		                enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
		            }
		        },
		        series: series
		    });
		});
	}
	
	function back(){
		window.history.go(-1);
	}
	
	//var m = new Material();
	/*//m.getZones();
	var enumVender = [];
	m.getDevices(function(data){
		for(var i=0;i<data.length;i++){
			var html = "<tr>";
			html += "<td>"+ data[i]["id"] +"</td>";
			html += "<td>"+ data[i]["zone"] +"</td>";
			html += "<td>"+ data[i]["vendor"] +"</td>";
			html += "<td>"+ data[i]["kind"] +"</td>";
			html += "<td>"+ data[i]["link"] +"</td>";
			html += "<td>"+ data[i]["name"] +"</td>";
			html += "<td>"+ data[i]["number"] +"</td>";
			html += "<td>"+ data[i]["network_ip"] +"</td>";
			html += "<td>"+ data[i]["network_port"] +"</td>";
			html += "<td>"+ data[i]["serial_baud_rate"] +"</td>";
			html += "<td>"+ data[i]["remark"] +"</td>";
			html +="</tr>";
			$("#container").append(html);
		}*/
		
		
	//});
	//m.getDeviceStatus();
	//m.getDeviceRecords();
</script>

</html>